<template>
		<div class="website-about">
			<img src="./assets/bg2.jpg" class="bg"/>
			<div class="header">
				<img src="./assets/phone-logo.png" class="logoImg">
				<ul class="nav">
						<li class="nav-text"><router-link to="/">首页</router-link></li>
						<li class="nav-text"><router-link to="/about-us"  class="hover">关于我们</router-link></li>
						<li class="nav-text"><router-link to="/contact-us">联系我们</router-link></li>
				</ul>
			</div> 
			<div class="content">
				<img src="./assets/about-us.png" class="imgtitle">
				<div class="text-info">
					<p>拾恋App（以下简称“拾恋”）是由武汉悠然一指网络有限公司开发运营的一款带有轻社交属性的情感服务型应用。</p>
					<p>拾恋依托于国内顶尖的情感专家团队，以情感模型为理论依据，以大量的真实情感案例为核心素材，为用户提供最佳的个性化专属解决方案，从本质上满足用户需求。</p>
					<p>拾恋以帮助失恋用户治愈、挽回为核心，旨在帮助用户解决情感困惑，打造最值得信赖的情感服务平台。</p>
				</div>
			</div>
		</div>
	</template>
	<script>
	
	</script>
	<style scoped type="text/css">
	.website-about {
		& .bg {
			position: absolute;
			width: 100vw;
			height: 100vh;
		}

		& .header {
			position: absolute;
			z-index: 99;
			width: 11.20rem;
			height: 0.56rem;
			top: 0.38rem;
			left: 50%;
			margin-left: -5.5rem;
			display: flex;
			justify-content: space-between;
			& .logoImg {
				width: 1.2rem;
				height: 0.56rem;
			}
			& .nav{
				display: flex;
				align-items: center;
			}
			& .nav-text {
				font-size: 0.2rem;
				margin-left: 0.66rem;
				line-height: 1;

				& a {
					color: #fff;
					&.hover {
						font-size: 0.24rem;
						border-bottom: 2px solid #ffecb3;
						padding: 2px 0;
					}
				}
			}
		}

		& .content {
			width: 8.68rem;
			position: absolute;
			top: 2rem;
			left: 50%;
			margin-left: -4.34rem;
			display: flex;
			flex-direction: column;
			align-items: center;

			& .imgtitle {
				width: 2.44rem;
				height: 0.52rem;
			}

			& .text-info {
				font-size: 0.18rem;
				color: #fff;
				line-height: 0.34rem;
				text-align: justify;
				margin-top: 0.8rem;
				width: 6.68rem;
				& p {
					margin-top: 0;
				}
			}
		}
	}

		@media (width <= 830px) {
		.website-about {
			& .header {
				width: 90%;
				margin-left: -45%;
				height: 0.84rem;

				& .logoImg {
					width: 1.74rem;
					height: 0.84rem;
				}

				& .nav-text {
					font-size: 0.23rem;
					margin-left: 0.58rem;
				}

				& .nav-text .hover {
					font-size: 0.3rem;
				}
			}

			& .content {
				top: 1.2rem;
				& .text-info p {
					font-size: 0.3rem;
					line-height: 0.48rem;
					padding: 0.1rem 0.5rem;
					
				}
			}
		}
	}
	</style>
	